<% presenter = Users::EditPresenter.new(self) %>
<% discord_config = Schools::Configuration::Discord.new(current_school)%>
<% content_for(:head) do %>
  <title><%= presenter.page_title %> | <%= t("users.edit.title") %></title>
<% end %>
<script id="user-edit__props" type="application/json">
  <%= presenter.props_to_json.html_safe %>
</script>
<div class="bg-gray-50 md:pt-18">
  <% if Settings.sso.discord.key.present? && discord_config.configured? %>
    <div class="container mx-auto px-3 py-4 md:py-8 max-w-5xl">
      <div class="bg-white shadow rounded-lg mt-4">
        <div class="flex flex-col md:flex-row">
          <% if current_user.discord_account_connected? %>
            <div class="flex items-center justify-center w-full md:w-1/3 bg-primary-50 rounded-t-md md:rounded-s-lg px-4 py-5 sm:p-6">
              <%= image_tag 'users/edit/discord-logo-blue.svg', class: 'w-1/2' %>
            </div>
            <div class="px-4 py-5 sm:p-6 md:mt-0 w-full md:w-2/3">
              <h4 class="font-semibold"><%= t(".discord_connected_message_title", school_name: current_school.name) %></h4>
              <ul class="mt-1 text-sm md:text-base text-gray-700 ms-5 list-disc">
                <%= simple_format(t(".discord_connected_message")) %>
              </ul>
              <div class="mt-3">
                <a href="https://discord.com/channels/<%=discord_config.server_id%>" target="_blank" rel="noopener" class='btn btn-default w-full md:w-auto'><%= t(".discord_connected_account") %></a>
                <%= button_to "Disconnect Discord", clear_discord_id_user_path, class: 'mt-4 md:mt-8 p-2 text-sm text-gray-500 font-semibold bg-transparent rounded-md cursor-pointer underline hover:text-red-500 hover:bg-gray-100', method: :post %>
              </div>
            </div>
          <% else %>
            <div class="flex flex-col justify-between w-full md:w-1/3 bg-primary-50 px-4 py-5 sm:p-6">
              <div>
                <h3 class="text-lg font-semibold"><%= t(".discord_title") %></h3>
                <p class="mt-1 text-sm text-gray-600"><%= t(".discord_description") %></p>
              </div>
              <%= image_tag 'users/edit/discord-logo-blue.svg', class: 'w-1/2' %>
            </div>
            <div class="px-4 py-5 sm:p-6 md:mt-0 w-full md:w-2/3">
              <h4 class="font-semibold"><%= t(".discord_how_it_works_title") %></h4>
              <ul class="mt-1 text-sm md:text-base text-gray-700 ms-5 list-disc">
                <%= t(".discord_how_it_works_html") %>
              </ul>
              <div class="mt-4">
                <%= link_to presenter.discord_federated_login_url, class: 'btn btn-primary' do %>
                  <i class="if i-discord text-lg"></i>
                  <span class="ms-2"><%= t(".discord_connect") %></span>
                <% end %>
              </div>
            </div>
          <% end %>
        </div>
      </div>
    </div>
  <%end%>
  <div id="react-root"></div>
</div>
